<template>
	<view class="yingdidetail">
		<headertop title="营位详情" :back1="back1"></headertop>
		<up-swiper height="332" :list="list6" @change="e => currentNum = e.current" :autoplay="false"
			indicatorStyle="right: 20px">
			<template #indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</template>
		</up-swiper>
		<view class="yindifeibox">
			<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11423@2x.png" class="yindifeibox_bakc"
				mode=""></image>
			<view class="btnyidi">
				营地费
			</view>
			<view class="jiageline">
				<view class="jiage">
					￥{{!userobj.level?contentobj.price:contentobj.userprice}}<span class="jiag1"
						style="margin-left:0rpx;">起</span>
					<span class="jiag1" style="margin-left:0rpx;" v-if="userobj.level">
						-会员价
					</span>
					<span style="margin-left: 36rpx;" class="jiag1">
						押金：￥{{contentobj.deposit}}
					</span>
				</view>

			</view>
		</view>
		<view class="bottomcontent">
			<view class="line1" v-if="!userobj.level">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Rectangle 24421@2x.png"
					class="line1back" mode=""></image>
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11424@2x.png" class="img1"
					mode=""></image>
				<view class="text">
					会员{{contentobj.zhe}}折，立省{{contentobj.sheng}}元
				</view>
				<view class="lijikait" @click="gopage1()">
					立即开通
				</view>
			</view>
			<view class="centerinfo">
				<view class="topline">
					<view class="title">
						<view class="box" v-if="contentobj.type==2">
							固
						</view>
						{{contentobj.title}}
					</view>
					<view class="icons">
						<!-- 		<image
							:src="contentobj.collect==1?'https://39gongli.oss-cn-beijing.aliyuncs.com/static/微信图片_20250513100026.png':'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(35).png'"
							class="icon1" mode="" @click="collectfun"></image> -->
						<button class="righttex" open-type="share" @chooseavatar="onChooseAvatar">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(36).png"
								class="rightteximg" mode="">
							</image>
						</button>
					</view>
				</view>
				<view class="text1">
					{{contentobj.detail}}
				</view>
				<view class="lianxibox">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11427@2x.png"
						class="lianxiboxback" mode="">
					</image>
					<view class="center">
						<view class="toline">
							<view class="leftbox">
								<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(29).png"
									class="icon" mode="">
								</image>
								<span>联系方式：{{yingweirenobj.camp_telphone}}</span>
							</view>
							<view class="lianxidizhi" @click="boda(yingweirenobj.camp_telphone)">
								联系营地
							</view>
						</view>
						<view class="botomline">
							<view class="leftbox">
								<view class="tline">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(30).png"
										mode=""></image>
									<span style="z-index: 999;">{{contentobj.address}}</span>
								</view>
								<view class="t2">
									距离您{{jianju}}km
								</view>
							</view>
							<image @click="daohang()"
								src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11425@2x.png"
								class="dticon" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="jiange">

			</view>
			<view class="yuyueshijian">
				<view class="yuyueshijian_centerbox">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11495@2x.png"
						class="yuyueshijian_centerbox_backshijian" mode=""></image>
					<view class="yuyueshijianline" @click="openrili">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(51).png" mode="">
						</image>
						<span style="z-index:999;">预约时间</span>
					</view>
					<scroll-view class="shijianbox" scroll-x="true">
						<view class="itemboxx "
							:style="{'background': yansefun(item,index),'border':active1==index?'':'none'}"
							v-for="(item,index) in timelist" :key="index" @click="camplistfun(item,index)">
							<view class="t1" :style="{'color': yansefun1(item,index)}">
								{{item.title}}
							</view>
							<view class="timer" :style="{'color':yansefun1(item,index)}">
								{{item.timestart}}~{{item.timeend}}
							</view>
							<view class="keyuyue"
								:style="{'background':yansefun2(item,index),'color':yansefun3(item,index)}">
								{{item.yueman==0?'可预约':'已约满'}}
							</view>
						</view>
					</scroll-view>

				</view>
			</view>
			<view class="jiange">

			</view>
			<view class="jibeninfo">
				<view class="jibeninfo_center">
					<view class="jibeninfo_center_title">
						<view class="bqt">

						</view>
						<view class="text">
							基本信息
						</view>
					</view>
					<view class="content">
						<view class="leftimagebox">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(31).png" mode="">
							</image>
							<span>场地类型</span>
						</view>
						<view class="rightcontent" v-if="contentobj.allplace">
							<template v-for="item in contentobj.allplace.slice(0,9)" v-if="!flag1" :key="item.id">
								<view class="qinr" v-if="item.checked==1">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(32).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
								<view class="qinr" style="color:#C9CDD4 ;" v-else>
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(34).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
							</template>
							<template v-for="item in contentobj.allplace" v-if="flag1" :key="item.id">
								<view class="qinr" v-if="item.checked==1">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(32).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
								<view class="qinr" style="color:#C9CDD4 ;" v-else>
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(34).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
							</template>
						</view>
					</view>
					<view class="openbox" @click="flag1=!flag1" v-if="contentobj.allplace.length>9">
						{{flag1?'展开':'收起'}}
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(37).png"
							:class="flag1?'deg':''" mode="">
						</image>
					</view>
					<view class="borderbottom">

					</view>
					<view class="content">
						<view class="leftimagebox">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(33).png" mode="">
							</image>
							<span>营地要求</span>
						</view>
						<view class="rightcontent" v-if="contentobj.allrequest">
							<template v-for="item in contentobj.allrequest.slice(0,9)" :key="item.id" v-if="!flag2">
								<view class="qinr" v-if="item.checked==1">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(32).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
								<view class="qinr" style="color:#C9CDD4 ;" v-else>
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(34).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
							</template>
							<template v-for="item in contentobj.allrequest" :key="item.id" v-if="flag2">
								<view class="qinr" v-if="item.checked==1">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(32).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
								<view class="qinr" style="color:#C9CDD4 ;" v-else>
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(34).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
							</template>
						</view>
					</view>
					<view class="openbox" @click="flag2=!flag2" v-if="contentobj.allrequest.length>9">
						{{flag2?'展开':'收起'}}
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(37).png"
							:class="flag2?'deg':''" mode="">
						</image>
					</view>
					<view class="borderbottom">

					</view>
					<view class="content" style="margin-bottom:28rpx;">
						<view class="leftimagebox">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(38).png" mode="">
							</image>
							<span>基础设施</span>
						</view>
						<view class="rightcontent" v-if="contentobj.allservice">
							<template v-for="item in contentobj.allservice.slice(0,9)" :key="item.id" v-if="!flag3">
								<view class="qinr" v-if="item.checked==1">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(32).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
								<view class="qinr" style="color:#C9CDD4 ;" v-else>
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(34).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
							</template>
							<template v-for="item in contentobj.allservice" :key="item.id" v-if="flag3">
								<view class="qinr" v-if="item.checked==1">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(32).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
								<view class="qinr" style="color:#C9CDD4 ;" v-else>
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(34).png"
										mode=""></image>
									<span>{{item.title}}</span>
								</view>
							</template>
						</view>
					</view>
					<view class="openbox" @click="flag3=!flag3" v-if="contentobj.allservice.length>9">
						{{flag3?'展开':'收起'}}
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(37).png"
							:class="flag3?'deg':''" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="jiange">

			</view>
			<view class="huanjingtupian">
				<view class="huanjingtupian_center">
					<view class="huanjingtupian_center_line">
						<view class="huanjingtupian_center_line_title">
							<view class="bqt">

							</view>
							<view class="text">
								环境图片
							</view>
						</view>
						<!-- <view class="huanjingtupian_center_line_more">
							<span>查看更多</span>
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(39).png" mode="">
							</image>
						</view> -->
					</view>
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
						<view id="demo1" class="scroll-view-item_H uni-bg-red" :key="index"
							v-for="(item,index) in contentobj.placeimages">
							<image :src="item" mode="" @click="previewImage(item, contentobj.placeimages)"></image>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="jiange" style="margin-top: 32rpx;">

			</view>
			<view class="shouhoubiox">
				<view class="linebox1" @click="goxieyi('售后保障')">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(42).png" class="icon"
						mode=""></image>
					<view class="texts">
						售后保障：<span style="color: #4E5969;">不约可退、在线预约</span>
					</view>

				</view>
				<view class="linebox1" @click="goxieyi('预约须知')">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(43).png" class="icon"
						mode=""></image>
					<view class="texts">
						预约须知：<span style="color: #4E5969;">这是一段预订须知内容这是一段预订须知内容这是一段预订须知内容</span>
					</view>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(39).png" mode=""
						class="rightarrow"></image>
				</view>
				<view class="linebox1" @click="goxieyi('时间规定')">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(44).png" class="icon"
						mode=""></image>
					<view class="texts">
						时间规定：<span style="color: #4E5969;">这是一段预订须知内容这是一段预订须知内容这是一段预订须知内容</span>
					</view>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(39).png" mode=""
						class="rightarrow"></image>
				</view>
				<view class="linebox1" @click="goxieyi('其他须知')">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(45).png" class="icon"
						mode=""></image>
					<view class="texts">
						其他须知：<span style="color: #4E5969;">这是一段预订须知内容这是一段预订须知内容这是一段预订须知内容</span>
					</view>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(39).png" mode=""
						class="rightarrow"></image>
				</view>
			</view>

		</view>
		<up-popup :show="show" mode="bottom">
			<uni-calendar :insert="false" :date="timeobj.datetime" @close="close" ref="calendar" :start-date="startDate"
				:end-date="endDate" @confirm="confirmriqi" />
		</up-popup>
		<view class="" style="height: 190rpx;">

		</view>
		<view class="fixedbox">
			<view class="btn" @click="gopage">
				立即预约
			</view>
		</view>
		<userlogin ref="denglu" @updata="getuser"></userlogin>
	</view>
</template>

<script setup>
	import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'
	import headertop from '@/components/header.vue'
	import userlogin from '@/components/getuser/getuser.vue'
	import {
		campfile,
		timesj,
		collect
	} from '@/api/Campposition.js'
	import
	AMapWX
	from '/common/amap-wx.130.js'
	import {
		campfile1
	} from '@/api/home.js'

	import {
		reactive,
		ref
	} from 'vue';
	import {
		userinfo
	} from '@/api/my.js'
	import {
		onPageScroll,
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const currentNum = ref(0)
	const flag1 = ref(false)
	const flag2 = ref(false)
	const flag3 = ref(false)
	const active1 = ref(0)
	const contentobj = ref({})
	const show = ref(false)
	const startDate = ref('')
	const endDate = ref('')
	const userobj = ref({})
	const denglu = ref(null)
	const yingweirenobj = ref({})
	const calendar = ref(null)
	const jianju = ref('')
	const timeobj = ref({})
	const timelist = ref([])
	const list6 = reactive([
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11407@2x.png',
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11407@2x.png',
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11407@2x.png',
	]);
	const back1 = ref('')
	const id = ref('')
	const typestr = ref('')
	onLoad((opt) => {
		console.log(opt, 'opt-----------------------');
		typestr.value = opt.typestr
		if (opt.pagetitle) {
			uni.setNavigationBarTitle({
				title: opt.pagetitle //导航栏名称，同时可使用三元表达式等动态设置
			});
		}
		getuser()
		id.value = opt.id
		init(opt.id)
		init1()
		getNext30Days()
		if (uni.getStorageSync('yuyuesoninfo')) {
			timeobj.value = uni.getStorageSync('yuyuesoninfo')
		}
		console.log(timeobj.value, 'timeobj.valuetimeobj.valuetimeobj.valuetimeobj.value');
		inittime(opt.id)
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})



	})
	onShow(() => {
		uni.getSetting({
			success: (res) => {
				if (!res.authSetting['scope.userLocation']) {
					console.log('授权位置');
					// 未授权，发起授权请求
					uni.authorize({
						scope: 'scope.userLocation',
						success: () => {
							juliinit()
						},
						fail: () => {
							uni.showModal({
								title: '提示',
								content: '需要位置权限才能使用该功能',
								showCancel: false,
								success() {
									uni.openSetting({
										success(res) {
											if (res
												.authSetting[
													'scope.userLocation'
												]) {
												juliinit()

											} else {
												uni.showToast({
													title: '位置授权失败',
													icon: 'none'
												})
											}
										}
									})
								}
							});
						}
					});
				} else {
					// 已授权，直接获取位置
					juliinit()
				}
			}
		});
	})

	function boda(number) {
		uni.makePhoneCall({
			phoneNumber: number,
			success: () => {
				uni.showToast({
					title: '正在拨打电话',
					icon: 'none'
				});
			},
			fail: () => {
				uni.showToast({
					title: '拨打电话失败',
					icon: 'none'
				});
			}
		});
	}

	function goxieyi(str) {
		uni.navigateTo({
			url: '/sub_index/index/activedetail?title=' + str
		})
	}

	function previewImage(img, image) {

		var img1 = JSON.parse(JSON.stringify(img))
		var image1 = JSON.parse(JSON.stringify(image))
		//预览图片

		for (var i in image1) {
			image1[i] = image1[i]
		}
		uni.previewImage({
			urls: image1, // 需要预览的图片链接列表，可以写你图片链接的数组或者跟我一样，就写一个单独的链接
			current: img1 // 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
		});

	}

	function openrili() {
		show.value = true
		console.log('daiakirili');
		calendar.value.open();
	}

	function gopage1() {
		if (!uni.getStorageSync('token')) {
			denglu.value.DengLu()
			return
		}
		uni.navigateTo({
			url: '/sub_my/my/memberquanyi?id=' + contentobj.value.vipid
		})
	}
	async function init1() {
		const res = await campfile1()
		if (res.data.code == 1) {
			yingweirenobj.value = res.data.data
		}
	}

	function daohang() {
		uni.openLocation({
			latitude: contentobj.value.lat * 1, //纬度
			longitude: contentobj.value.lng * 1, //经度
			address: contentobj.value.address,
			success: function() {
				console.log('打开位置成功');
			},
			fail: function(err) {
				console.error('打开位置失败', err);
			}
		});

	}

	function getNext30Days() {
		let dates = [];
		let today = new Date();

		for (let i = 0; i < 30; i++) {
			let date = new Date();
			date.setDate(today.getDate() + i);

			let year = date.getFullYear();
			let month = date.getMonth() + 1; // 月份从0开始，需要加1
			let day = date.getDate();

			// 格式化月份和日期，确保两位数字
			month = month < 10 ? '0' + month : month;
			day = day < 10 ? '0' + day : day;

			// 格式化为 YYYY-MM-DD
			let formattedDate = `${year}-${month}-${day}`;

			// 获取星期几
			let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
			let weekday = weekdays[date.getDay()];

			dates.push({
				date: formattedDate,
				day: day,
				month: month,
				year: year,
				weekday: '周' + weekday,
				fullDate: `${year}年${month}月${day}日 星期${weekday}`
			});
		}
		// 2025-5-15
		startDate.value = `${dates[0]['year']}-${dates[0]['month']}-${dates[0]['day']}`
		endDate.value =
			`${dates[dates.length-1]['year']}-${dates[dates.length-1]['month']}-${dates[dates.length-1]['day']}`
	}

	function confirmriqi(e) {
		console.log(e, 'eeeeeeeeeeeeeeeee');
		timeobj.value.datetime = e.fulldate
		inittime(contentobj.value.id)
	}

	function close() {
		show.value = false
	}

	function juliinit() {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				var lat = res.latitude
				var lng = res.longitude
				jianju.value = (distance(lat, contentobj.value.lat, lng, contentobj.value.lng) / 1000).toFixed(
					1)
			},
			fail: (err) => {
				uni.showToast({
					title: '获取定位失败',
					icon: 'none'
				})
			}
		});

		// var myAmapFun = new AMapWX({
		// 	key: 'e2d3be3bfcadad2d69b6c36439fab922'
		// });

		// myAmapFun.getRegeo({
		// 	success: function(data) {
		// 		//成功回调
		// 		var lat = data[0]['latitude']
		// 		var lng = data[0]['longitude']
		// 		jianju.value = (distance(lat, contentobj.value.lat, lng, contentobj.value.lng) / 1000).toFixed(
		// 			1)
		// 		console.log(data, jianju.value, 'data------------');
		// 	},
		// 	fail: function(info) {
		// 		//失败回调
		// 		console.log(info)
		// 		uni.showToast({
		// 			title: '获取定位失败',
		// 			icon: 'none'
		// 		})
		// 	}
		// })
	}

	function distance(la1, lo1, la2, lo2) {
		/**
		 * 由经纬度计算两点之间的距离，la为latitude缩写，lo为longitude
		 * @param la1 第一个坐标点的纬度
		 * @param lo1 第一个坐标点的经度
		 * @param la2 第二个坐标点的纬度
		 * @param lo2 第二个坐标点的经度
		 * @return (int)s   返回距离(单位千米或公里)
		 * @tips 注意经度和纬度参数别传反了，一般经度为0~180、纬度为0~90
		 * 具体算法不做解释，有兴趣可以了解一下球面两点之间最短距离的计算方式
		 */
		var La1 = la1 * Math.PI / 180.0;
		var La2 = la2 * Math.PI / 180.0;
		var La3 = La1 - La2;
		var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
		var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(
			Lb3 / 2), 2)));
		s = s * 6378.137;
		s = Math.round(s * 10000) / 10000;
		s = s.toFixed(2);
		return s;
	}

	async function getuser() {
		const res = await userinfo()
		if (res.data.code == 1) {
			userobj.value = res.data.data
		}
	}
	async function inittime(id) {

		const res = await timesj({
			cid: id,
			date: timeobj.value.datetime
		})
		if (res.data.code == 1) {
			timelist.value = res.data.data.timelist
			var ind = timelist.value.findIndex(item => item.id == timeobj.value.pid)
			if (ind == -1) {
				active1.value = -1
				return
			}
			if (timelist.value[ind]['yueman'] == 1) {
				active1.value = -1
			} else {
				active1.value = ind
			}
		}
	}
	async function init(id) {
		const res = await campfile({
			id
		})
		if (res.data.code == 1) {
			contentobj.value = res.data.data
			list6.value = res.data.data.images.map(item => item)
		}
	}
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = 'rgba(0,0,0,0.32)'
		} else {
			back1.value = ''
		}
	})

	function onShareAppMessage() {
		return {
			title: '39公里小程序', //分享的名称
			path: '/sub_Campposition/Campposition/yingdidetail1?id=' + id.value
			//页面的路径
		}
	}
	//分享到朋友圈
	function onShareTimeline() {
		return {
			title: '39公里小程序',
			path: '/sub_Campposition/Campposition/yingdidetail1?id=' + id.value
		}
	}



	async function collectfun() {
		if (!uni.getStorageSync('token')) {
			denglu.value.DengLu()
			return
		}
		const res = await collect({
			gid: contentobj.value.id,
			type: 3
		})
		if (res.data.code == 1) {
			if (contentobj.value.collect == 1) {
				contentobj.value.collect = 0
				uni.showToast({
					title: '取消成功'
				})
			} else {
				contentobj.value.collect = 1
				uni.showToast({
					title: '收藏成功'
				})
			}

		} else {
			uni.showToast({
				title: res.data.msg
			})
		}
	}

	function camplistfun(item, index) {
		if (item.yueman == 1) {
			uni.showToast({
				icon: 'none',
				title: '该时间段已约满'
			})
			return
		} else {
			active1.value = index
			timeobj.value.pid = timelist.value[active1.value]['id']
		}
	}

	function yansefun(item, index) {
		if (item.yueman == 0) {
			if (index != active1.value) {
				return '#fff'
			} else {
				return ''
			}
		} else {
			return '#C9CDD4;'
		}
	}

	function yansefun2(item, index) {
		if (item.yueman == 0) {
			if (index != active1.value) {
				return '#E9FBE8'
			} else {
				return ''
			}
		} else {
			return '#E5E6EB;'
		}
	}

	function yansefun3(item, index) {
		if (item.yueman == 0) {
			if (index != active1.value) {
				return '#7EBC79'
			} else {
				return ''
			}
		} else {
			return '#86909C;'
		}
	}

	function yansefun1(item, index) {
		if (item.yueman == 0) {
			if (index != active1.value) {
				return '#4E5969'
			} else {
				return ''
			}
		} else {
			return '#86909C;'
		}
	}

	function gopage(str) {
		if (str == '购物车') {
			uni.navigateTo({
				url: '/sub_commodity/commodity/gouwuche'
			})
			return
		}
		if (active1.value != -1) {


			uni.setStorageSync('yuyuesoninfo', timeobj.value)
			if (typestr.value == 'AppointmentService') {
				uni.navigateTo({
					url: '/sub_index/index/AppointmentService?id=' + id.value
				})
				return
			}
			uni.navigateTo({
				url: '/sub_Campposition/Campposition/yuyueinfo?id=' + id.value
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: '请选择预约时间段'
			})
		}

	}
</script>

<style lang="scss">
	.deg {
		transform: rotate(180deg);
	}

	.fixedbox {
		width: 100%;
		overflow: hidden;
		height: 184rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0%;
		z-index: 9999;

		.btn {
			width: 686rpx;
			height: 88rpx;
			background: #7EBC79;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 88rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			margin: auto;
			margin-top: 22rpx;
		}
	}

	.rightcontent .qinr:nth-child(3n) {
		margin-right: 0rpx !important;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 750rpx;
		margin-left: 32rpx;
		margin-top: 22rpx;

		.scroll-view-item_H {
			display: inline-block;
			width: 276rpx;
			height: 182rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
			margin-right: 16rpx;

			image {
				width: 276rpx;
				height: 182rpx;
			}
		}
	}


	.yingdidetail {
		width: 100%;
		overflow: hidden;

		.bottomcontent {
			width: 100%;
			background: #FFFFFF;
			border-radius: 36rpx 36rpx 0rpx 0rpx;
			margin-top: -20rpx;
			overflow: hidden;

			.jiange {
				width: 100%;
				height: 28rpx;
				background: #F7F8FA;
			}

			.shouhoubiox {
				width: 100%;
				overflow: hidden;

				.linebox1 {
					width: 686rpx;
					height: 76rpx;
					display: flex;
					align-items: center;
					margin: auto;
					border-bottom: 1rpx solid #F2F3F5;

					.icon {
						width: 40rpx;
						height: 40rpx;
					}

					.texts {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #1D2129;
						margin-left: 10rpx;
						width: 380rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.rightarrow {
						width: 36rpx;
						height: 36rpx;
						margin-left: 210rpx;
					}
				}
			}

			.huanjingtupian {
				width: 100%;
				overflow: hidden;
				margin-top: 36rpx;

				&_center {
					width: 100%;
					overflow: hidden;

					&_line {
						width: 686rpx;
						margin: auto;
						display: flex;
						align-items: center;
						justify-content: space-between;

						&_more {
							display: flex;
							align-items: center;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;

							image {
								width: 36rpx;
								height: 36rpx;
								margin-left: 2rpx;
							}
						}

						&_title {
							display: flex;
							align-items: center;
							margin-top: 32rpx;

							.bqt {
								width: 6rpx;
								height: 36rpx;
								background: #7EBC79;
								border-radius: 0rpx 24rpx 24rpx 0rpx;
							}

							.text {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #1D2129;
								margin-left: 12rpx;
							}
						}

					}

				}
			}

			.yuyueshijian {
				width: 100%;
				overflow: hidden;

				&_centerbox {
					width: 686rpx;
					overflow: hidden;
					position: relative;
					margin: 30rpx auto;
					height: 274rpx;

					.shijianbox {
						width: 646rpx;
						margin: auto;
						margin-top: 32rpx;
						white-space: nowrap;

						.hh {
							background: #C9CDD4 !important;
							border: none !important;
						}

						.hh1 {
							background: #FFFFFF !important;
							border: none !important;
						}

						.ee {
							color: #4E5969 !important;
						}

						.itemboxx {
							width: 200rpx;
							display: inline-block;
							height: 142rpx;
							background: #F6FFF2;
							box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(63, 133, 58, 0.28);
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							border: 2rpx solid #4A953A;
							z-index: 999;
							position: relative;
							margin-right: 24rpx;

							.t1 {
								width: 100%;
								text-align: center;
								font-weight: 500;
								font-size: 28rpx;
								color: #4A983C;
								margin-top: 18rpx;
								z-index: 999;
							}

							.timer {
								z-index: 999;
								font-weight: 500;
								font-size: 24rpx;
								color: #4A983C;
								text-align: center;
								margin-top: 10rpx;
							}

							.keyuyue {
								width: 100%;
								height: 42rpx;
								background: #4A953A;
								border-radius: 0rpx 0rpx 14rpx 14rpx;
								text-align: center;
								line-height: 42rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #FFFFFF;
								position: absolute;
								bottom: 0%;
							}
						}
					}

					&_backshijian {
						width: 686rpx;
						height: 274rpx;
						position: absolute;
					}

					.yuyueshijianline {
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #47533D;
						margin-left: 504rpx;
						margin-top: 12rpx;

						image {
							width: 52rpx;
							height: 52rpx;
							margin-right: 8rpx;
							z-index: 999;
						}
					}
				}
			}

			.jibeninfo {
				width: 100%;
				overflow: hidden;

				&_center {
					width: 686rpx;
					margin: auto;

					.borderbottom {
						height: 2rpx;
						width: 100%;
						background: #F2F3F5;
						margin-top: 28rpx;
					}

					.openbox {
						display: flex;
						align-items: center;
						margin: auto;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #7EBC79;
						margin: auto;
						width: 96rpx;
						margin: auto;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.content {
						display: flex;
						align-items: center;
						margin-top: 46rpx;

						.rightcontent {
							width: 488rpx;
							display: flex;
							flex-wrap: wrap;
							margin-left: 58rpx;



							.qinr {
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								margin-right: 15rpx;
								color: #1D2129;
								white-space: nowrap !important;
								margin-bottom: 24rpx;

								image {
									width: 28rpx;
									height: 28rpx;
									margin-right: 16rpx;
								}
							}
						}

						.leftimagebox {
							display: flex;
							flex-direction: column;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #86909C;

							image {
								width: 68rpx;
								height: 68rpx;
							}
						}
					}

					&_title {
						display: flex;
						align-items: center;
						margin-top: 32rpx;

						.bqt {
							width: 6rpx;
							height: 36rpx;
							background: #7EBC79;
							border-radius: 0rpx 24rpx 24rpx 0rpx;
						}

						.text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #1D2129;
							margin-left: 12rpx;
						}
					}
				}
			}

			.centerinfo {
				width: 686rpx;
				margin: auto;
				margin-top: 26rpx;
				overflow: hidden;


				.lianxibox {
					width: 686rpx;
					height: 206rpx;
					margin-top: 24rpx;
					overflow: hidden;
					position: relative;
					margin-bottom: 28rpx;

					.lianxiboxback {
						width: 686rpx;
						height: 206rpx;
						position: absolute;
					}

					.center {
						width: 628rpx;
						margin: auto;
						z-index: 999;

						.botomline {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 46rpx;

							.dticon {
								width: 72rpx;
								height: 72rpx;
								z-index: 9999;
							}

							.leftbox {
								z-index: 999;

								.t2 {
									font-weight: 400;
									font-size: 24rpx;
									color: #86909C;
									margin-top: 12rpx;
									z-index: 999;
								}

								.tline {
									display: flex;
									align-items: center;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #1D2129;
									z-index: 999;

									image {
										width: 32rpx;
										height: 32rpx;
										margin-right: 8rpx;
										z-index: 999;
									}

								}
							}
						}

						.toline {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 24rpx;

							.lianxidizhi {
								text-decoration: underline;
								color: #4FB2FA;
								font-size: 28rpx;
								z-index: 999;
							}

							.leftbox {
								display: flex;
								align-items: center;
								font-weight: 500;
								font-size: 28rpx;
								color: #1D2129;
								z-index: 999;

								.icon {
									width: 32rpx;
									height: 32rpx;
									z-index: 999;
									margin-right: 8rpx;
								}
							}
						}
					}
				}

				.text1 {
					width: 100%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #868686;
					margin-top: 26rpx;
				}

				.topline {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.icons {
						display: flex;
						align-items: center;

						.icon1 {
							width: 40rpx;
							height: 38.34rpx;
							margin-right: 38rpx;
						}

						.righttex {
							width: 36rpx;
							height: 36rpx;
							position: relative;
							display: flex;
							border: none !important;
							align-items: center;
							overflow: auto !important;
							// background: $btn !important;
							background-color: none !important;
							background-size: 100% 138% !important;
							padding-left: 0 !important;
							padding-right: 0 !important;
							margin-left: 0rpx !important;
							-webkit-tap-highlight-color: none !important;
							margin-right: 0 !important;
							overflow: hidden !important;

							&:after {
								border: none;
								background-color: none !important;
							}

							.rightteximg {
								width: 36rpx;
								height: 36rpx;
								position: absolute;
							}

						}

					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 44rpx;
						color: #1D2129;
						display: flex;
						align-items: center;

						.box {
							width: 56rpx;
							height: 40rpx;
							background: #7EBC79;
							border-radius: 4rpx 20rpx 4rpx 20rpx;
							line-height: 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #FFFFFF;
							margin-right: 12rpx;
							text-align: center;
						}

					}
				}
			}

			.line1 {
				width: 686rpx;
				height: 90rpx;
				position: relative;
				display: flex;
				align-items: center;
				margin: auto;
				margin-top: 32rpx;
				overflow: hidden;

				.img1 {
					width: 68rpx;
					height: 68rpx;
					margin-left: 16rpx;
					z-index: 999;
				}

				.lijikait {
					width: 156rpx;
					height: 86rpx;
					background-color: #A4E197;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 86rpx;
					position: absolute;
					right: 0;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					z-index: 999;
				}

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #64D34D;
					z-index: 999;
					white-space: normal;
					margin-left: 20rpx;
				}

				.line1back {
					position: absolute;
					width: 686rpx;
					height: 90rpx;
				}
			}
		}

		.yindifeibox {
			width: 100%;
			height: 178rpx;
			position: relative;
			overflow: hidden;

			&_bakc {
				width: 100%;
				height: 178rpx;
				position: absolute;
				z-index: -1;
			}

			.btnyidi {
				width: 112rpx;
				height: 38rpx;
				background: #FFFFFF;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				text-align: center;
				line-height: 38rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #48863B;
				margin-left: 32rpx;
				margin-top: 24rpx;
			}

			.jiageline {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				margin-left: 32rpx;

				.jiage {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 44rpx;
					color: #FFFFFF;
				}

				.jiag1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-left: 36rpx;
				}
			}
		}

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
	}
</style>